<template>
  <div>
    <div class="Router_main page">
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
      <div class="nav-footer">
        <footer>
          <router-link
            v-for="(item, index) in navList"
            :to="item.path"
            :key="index"
            v-bind:class="{'active':activeRoute == item.path}"
          >
            <div :class="'tab-'+index"></div>
            <p v-text="item.name"></p>
          </router-link>
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      navList: [
        {
          path: "/home",
          name: "推荐"
        },
        {
          path: "/story",
          name: "故事"
        },
        {
          path: "/footprints",
          name: "足迹"
        },
        {
          path: "/mine",
          name: "我的"
        }
      ]
    };
  },
  computed: {
    activeRoute() {
      return this.$route.path;
    }
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "~style/home.scss";
</style>
